<template>
    <user-info :id="$route.params.id"></user-info>
    <router-link to="/user/5">跳转
        
    </router-link>
    <router-view></router-view>
<!-- 方式一 -->
   <h1> {{ $route.params.id }}</h1>
    <button @click="onLink">登陆页</button>
    <h1>{{ name }} -- {{ age }}  --id: {{ id }}</h1>
   <!-- <h1>{{ id }}</h1> -->

</template>
<script setup>
import UserInfo from "@/components/UserInfo.vue"
import {RouterLink,RouterView,useRoute,useRouter,onBeforeRouteUpdate} from 'vue-router'
import {defineProps} from 'vue'
// 方式二
const props = defineProps(['name','age','id']);
const route = useRoute();
const router = useRouter();
// console.log(route);
console.log("路由参数:",route.params);
console.log('------------------------');
// console.log(router);
//组件内守卫
onBeforeRouteUpdate(
     (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      console.log('update');
      if (to.params.id !== from.params.id) {
        console.log("用户切换");
      }
    }
)




</script>